<!--
	描述：通用的键值对录入方式弹窗
-->
<template>
	<dialogBody @confirm="confirm" @cancel="cancel" ref="body">
		<template #title>
			{{title}}
		</template>
		<div class="selectDevice">
			<div class="viewDevice">
				<p>查看设备</p>
				<newmultipleSelection ref="selectionView" :dataList="showDataList" style="height: 350px;"
				 :defaultCheckedIds="defaultCheckedIds" :selectionType="selectionType" :getIdMethod="getIdMethod"></newmultipleSelection>
			</div>
			<div class="operateDevice">
				<p>操作设备</p>
				<newmultipleSelection ref="selectionEdit" :dataList="showDataList" style="height: 350px;"
				 :defaultCheckedIds="defaultCheckedIds" :selectionType="selectionType" :getIdMethod="getIdMethod"></newmultipleSelection>
			</div>
		</div>
	</dialogBody>
</template>

<script>
	import dialogBody from '@/components/module/dialog/dialogBody.vue'
	import newmultipleSelection from '@/components/module/selection/base/newmultipleSelection.vue'
	import userManagerStore from '@/page/userManager/userManagerStore.js'
	export default {
		components: {
			dialogBody,
			newmultipleSelection
		},
		props: [],
		data() {
			return {
				title: '',
				callback: undefined,
				selectionType: 'multiple',
				getIdMethod: item => item.id,
				defaultCheckedIds: undefined,
				filterInfo: ''
			}
		},
		computed: {
			dataList() {
				return userManagerStore.state.nowUnitDeviceTree.next
			},
			showDataList() {
				if (this.filterInfo != null && this.filterInfo.length > 0) {
					//需要过滤
					var list = filterTreeRecursive(copy(this.dataList), item => {
						if (item.hasOwnProperty('next')) {
							return true
						}
						if (item.name.includes(this.filterInfo)) {
							return true
						}
						return false
					})
					//再次过滤空数组
					list = filterTreeRecursive(list,item=>{
						if (item.hasOwnProperty('next') && item.next.length == 0) {
							return false
						}
						return true
					})
					return list
				} else {
					//不需要过滤
					return this.dataList
				}
			}
		},
		watch: {},
		mounted() {},
		methods: {
			confirm() {
				var viewIdsArr = []
				var viewKeys = Object.keys(this.$refs.selectionView.nowSelectIds)
				for(let i = 0;i < viewKeys.length;i++){
					if(this.$refs.selectionView.nowSelectIds[viewKeys[i]]){
						viewIdsArr.push(viewKeys[i])
					}
				}
				var editIdsArr = []
				var editKeys = Object.keys(this.$refs.selectionEdit.nowSelectIds)
				for(let i = 0;i < editKeys.length;i++){
					if(this.$refs.selectionEdit.nowSelectIds[editKeys[i]]){
						editIdsArr.push(editKeys[i])
					}
				}
				if (this.callback != undefined) {
					this.callback({view: viewIdsArr.join(','), edit: editIdsArr.join(',')})
				}
				this.close()
			},
			cancel() {
				this.close()
			},
			close() {
				this.$refs.body.hide()
				this.filterInfo = ''
			},
			open(title, callback) {
				this.title = title
				this.callback = callback
				this.$refs.body.open()
			},
		}
	}
</script>
<style scoped>
	.selectDevice{
		width: 100%;
		overflow: hidden;
	}
	
	.selectDevice>div{
		float: left;
		width: 50%;
		padding: 4px;
		box-sizing: border-box;
	}
	
	.viewDevice{
		border-right: dashed 1px #E4E4E4;
	}
		
	.selectDevice>>>.list-body{
		width: auto;
	}
</style>